<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 300px;
      padding: 20px;
      font-family: 'Microsoft YaHei', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      margin: 0;
    }
    
    .container {
      text-align: center;
    }
    
    h1 {
      font-size: 18px;
      margin-bottom: 20px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    
    .screenshot-btn {
      background: linear-gradient(45deg, #ff6b6b, #ee5a24);
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 25px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      width: 100%;
      margin-bottom: 15px;
    }
    
    .screenshot-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    }
    
    .screenshot-btn:active {
      transform: translateY(0);
    }
    
    .status {
      font-size: 12px;
      margin-top: 10px;
      opacity: 0.8;
    }
    
    .icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 15px;
      background: rgba(255,255,255,0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
          justify-content: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="icon">📸</div>
    <h1>页面截屏工具</h1>
    <button id="screenshotBtn" class="screenshot-btn">
      截取当前页面
    </button>
    <div id="status" class="status">点击按钮开始截屏</div>
  </div>
  <script src="popup.js"></script>
</body>
</html>